<?php
$dateTo = new DateTime('now');
$dateFrom = new DateTime('now');
$dateFrom->sub(new DateInterval("P10D"));
$users= User::listUser(false, 2);
?>
<div class="viewport">
    <div class="overview" style="top: 0px;">
        <div class="action-nav-content">
            <div class="links-section"><div class="mozaic-widget action-menu-container widget-activity_action_menu" data-widget="activity_action_menu" >
                    <div class="action-nav-header">
                        <div id="stream-info-holder"><h1 class="stream-title"><i class="icon-inbox"></i><span>Monitoring Team KPI</span></h1></div>
                        <div class="button-toggle-action_menu"><i class="icon-filter-list"></i><i class="icon-show-more"></i></div>
                        <p class="left-nav-text">Scoring statistic</p>
                        <div class="clear"></div>
                        <h5 class="action-nav-title">MAIN SECTIONS</h5>
                        <ul class="nav nav-list main-section-nav activity-menu">
                            <?php $user = User::getLogedInUser(); ?>
                            <li id="tasks-page" <?php if (strtoupper($this->params[1]) == 'OVERRAL' || strtoupper($this->params[2]) == '') echo 'class="active-section"' ?>>
                                <a href="#monitoring" class="url-widget-link"><i class="icon-tasks"></i><span>Overall</span></a>
                                <div class="mozaic-widget widget-pin_timeline" data-widget="pin_timeline" ></div>
                            </li>
                            <li>
                            <a href="#monitoring/month" class="url-widget-link"><i class="icon-tasks"></i><span>This month</span></a>
                                <div class="mozaic-widget widget-pin_timeline" data-widget="pin_timeline" ></div>
                            </li>
                            <li>
                            <a href="#monitoring/lastupdate" class="url-widget-link"><i class="icon-tasks"></i><span>Last Update</span></a>
                                <div class="mozaic-widget widget-pin_timeline" data-widget="pin_timeline" ></div>
                            </li>
                        </ul>
                        <div class="filters-section">
                        <div class="mozaic-widget widget-search_filter_list" data-widget="search_filter_list" ><h5 class="action-nav-title">FILTER THE DATA</h5></div>
                         <div class="btn-holder clear-filters" style="display: none;"><button class="btn btn-small"><i class="icon-clear"></i>Clear</button></div><p class="filter-type filter-type-date">date:</p>
                    <div id="date-filter-widget" class="mozaic-widget widget-date_filter" data-widget="date_filter" >
                        <div class="filter-button btn btn-large" rel="tooltip" data-original-title="Filter metrics for a day, a week or as far back as the stream creation date!">
                            <a><i class="icon-filter"></i><span id="selected_date" dateFrom="<?php echo $dateFrom->format("d-m-Y"); ?>" dateTo="<?php echo $dateTo->format("d-m-Y"); ?>" class="button-text"><?php echo $dateFrom->format("M d") . ' - ' . $dateTo->format("M d"); ?></span></a>
                        </div>
                        <div class="filter-overlay action-nav-filtering">
                            <div class="filter-container">
                                <div class="filter-container-mask calendar-container">
                                    <button id="last_week" class="btn">Last Week</button>
                                    <button id="last_month" class="btn">Last Month</button>
                                    <p class="calendar-info-text">Or select the start &amp; end date:</p>
                                    <div id="date-filter">
                                        <label for="from">From</label>
                                        <div id="from"></div>
                                        <label for="to">to</label>
                                        <div id="to"></div>
                                    </div>
                                </div>
                                <div class="btn-holder">
                                    <div class="btn filter-back-button"><i class="icon-back"></i>Back</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="clear"></div>
                    <!-- start user -->
                     <p class="filter-type filter-type-user">users: </p>
                    <div id="user-filter-widget" class="mozaic-widget widget-user_filter">
                        <div class="filter-button btn btn-large" rel="tooltip" data-original-title="Filter mentions by a user !">
                            <a data-value="0"><i class="icon-filter"></i><span id="selected-user" class="button-text">All users</span></a>
                        </div>
                        <div class="filter-overlay action-nav-filtering">
                            <div class="filter-container">
                                <div class="filter-container-top">
                                    <input type="text" class="search-box search-filter-box" placeholder="Users">
                                </div>
                                <div class="filter-container-mask ">
                                    <div class="scrollbar" style="height: 0px;"><div class="track" style="height: 0px;"><div class="thumb"><div class="end"></div></div></div></div>
                                    <div class="viewport">
                                        <div class="overview" style="top: 0px;">
                                            <ul class="results filter-container-list">
                                                <li data-value="0" class="back-list-link">
                                                    <a class="action-color-active">
                                                        <i class="icon-back-list"></i>
                                                        All users
                                                    </a>
                                                </li>
                                                <?php
												if(count($users) >0)
			
												foreach($users as $u):
											
												?>
                                                <li data-value="<?php echo $u->id; ?>" class="back-list-link selected"><a><i class="icon-circle-list"></i><?php echo  $u->name; ?></a></li>
                                                <?php endforeach; ?>
                                            </ul>
                                        </div> 
                                    </div>
                                </div>
                                <div class="btn-holder">
                                    <div class="btn filter-back-button"><i class="icon-back"></i>Back</div>
                                </div>
                            </div>
                        </div></div>                   
                    <!--- end user-->                   
                        </div>
                    </div>
                </div>
            </div>
        </div></div>
    <div class="actions-section"></div>
</div>
</div>
</div>
<script>
    if ($('script[src="/Libs/jqueryui/js/jquery-ui-1.10.3.custom.min.js"]').length === 0) {
        LazyLoad.js("/Libs/jqueryui/js/jquery-ui-1.10.3.custom.min.js", loadScriptComplete);
    }
    else
        loadScriptComplete();
    function loadScriptComplete() {
        $(function() {
            $("#from").datepicker({dateFormat: 'dd-mm-yy',
                onSelect: function(event) {
                    $('.filter-container-mask .btn-red').removeClass('btn-red');
                }});
            $("#to").datepicker({dateFormat: 'dd-mm-yy',
                onSelect: function(event) {
                    var streamId = window.location.href.split('#')[1].split('/')[1];
                    setCookie('stream[monitoring][datefrom]', $("#from").datepicker().val(), 1);
                    setCookie('stream[monitoring][dateto]', $(this).val(), 1);
                    applyFilter($(this));
                }});
        });
        $('#from').datepicker("setDate", "<?php echo $dateFrom->format("d-m-Y") ?>");
        $('#to').datepicker("setDate", "<?php echo $dateTo->format("d-m-Y") ?>");
        $(document).on('click', '#last_week', function(e) {
<?php
$dateFrom = new DateTime('now');
$dateFrom->sub(new DateInterval("P7D"));
?>
            $('#from').datepicker("setDate", "<?php echo $dateFrom->format("d-m-Y") ?>");
            $('#to').datepicker("setDate", "<?php echo $dateTo->format("d-m-Y") ?>");
            $('.calendar-container .btn-red').removeClass('btn-red');
            $(this).addClass('btn-red');
            applyFilter($('#to'));
        });
        $(document).on('click', '#last_month', function(e) {
<?php
$dateFrom = new DateTime('now');
$dateFrom->sub(new DateInterval("P1M"));
?>
            $('#from').datepicker("setDate", "<?php echo $dateFrom->format("d-m-Y") ?>");
            $('#to').datepicker("setDate", "<?php echo $dateTo->format("d-m-Y") ?>");
            $('.calendar-container .btn-red').removeClass('btn-red');
            $(this).addClass('btn-red');
            applyFilter($('#to'));
        });
    }
    params = window.location.href.split('#')[1].split("/");
<?php
$dateFrom = new DateTime('now');
$dateFrom->sub(new DateInterval("P10D"));
?>
    var orgDateFrom = "<?php echo $dateFrom->format("d-m-Y") ?>";
    var orgDateTo = "<?php echo $dateTo->format("d-m-Y") ?>";
    var globalLanguage = "<?php echo $this->streamView->model->language; ?>";
</script>